<!DOCTYPE html>

<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, user-scalable=no"
        />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>vue3响应式原理</title>
    </head>

    <body>
        <h1>vue3响应式原理</h1>
        <script>
            // 目标对象
            let user = {
                name: "小憨憨",
                age: 19,
                wife: {
                    name: "你猜",
                    age: 20,
                },
            };

            // 把目标对象变成代理对象
            let proxyUser = new Proxy(user, {
                // 获取目标对象上的属性
                get(target, prop) {
                    console.log("get方法调用了");
                    return Reflect.get(target, prop);
                },
                // 修改或添加目标对象上的属性
                set(target, prop, val) {
                    console.log("set方法调用了");
                    return Reflect.set(target, prop, val);
                },
                // 删除某个目标对象的属性
                defineProperty(target, prop) {
                    console.log("delete方法被调用了");
                    return Reflect.defineProperty(target, prop);
                },
            });

            // 通过代理对象获取目标对象中的某个属性值
            console.log(proxyUser.name);

            proxyUser.name = "陆憨憨";
            console.log(user);

            proxyUser.gender = "男";
            console.log(user);

            delete proxyUser.age;
            console.log(user);
        </script>
    </body>
</html>
